<template>
  <div class="body_bgi full relative p_10">
    <bigscreen-header headerName="登录" />

    <div class="w_full h_70_p absolute_center flex_column_center">
      <div class="w_200 h_200 absolute top_0 left_center">
        <img class="full" src="../assets/image/logo.png" alt="">
      </div>

      <div class="w_full text_center main_text ls_5 fs_40 font_zh absolute_center ls_5">
        乌审旗第十五届鄂尔多斯细毛羊赛羊活动
      </div>

      <div class="w_400 m_0_auto login_form_box absolute bottom_0 left_center">
        <el-form :label-position="right" label-width="0px" :model="loginForm">
          <el-form-item label="">
            <el-input v-model="loginForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="loginForm.password"></el-input>
          </el-form-item>
        </el-form>

        <el-button 
          class="w_full main_btn" 
          round 
          @click="login">登录
        </el-button>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'
  import { login } from '@/api/index.js'

  export default {
    name: 'Login',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        loginForm: {
          phone: '13847757009',
          password: '123456'
        }
      }
    },
    
    async mounted() {
                      
    },
    methods: {
      async login() {
        let res = await login(this.loginForm)
        try { 
          if (res.code == 1000 && res.data.token) {
            window.sessionStorage.setItem('token', res.data.token)
            window.sessionStorage.setItem('user', res.data.user)

            this.$message({
              message: '登录成功！',
              type: 'success'
            });

            this.$router.push('/')
          }
        } catch (err) {
          console.log('登录失败 : ', err);
        }
      }
    }
  }
</script>

<style>
  .login_form_box { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding: 20px 30px; }

  .login_form_box > .el-form  {
    background-color: var(--sub-color) !important;
  }

  .login_form_box > .el-form > .el-form-item > .el-form-item__content > .el-input > .el-input__inner {
    background-color: var(--sub-color) !important;
    color: var(--main-color);
    text-align: center !important;
    border: none !important;
  }

  .login_form_box > .el-form > .el-form-item > .el-form-item__content > .el-input > .el-input__inner:nth-child(1) {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
  }

  .login_form_box > .el-form > .el-form-item > .el-form-item__content > .el-input > .el-input__inner:nth-child(2) {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }
</style>